<template>
  <div class="statistics-container">
    <StatisticsHeader :timeRange="timeRange" :flag="flag" @getDate="getDate" />
    <div class="echart">
      <TurnoverStatistics :turnoverData="turnoverData" />
      <UserStatistics :userData="userData" v-if="userStore.rule === 'admin'" />
      <OrdersStatistics :ordersData="ordersData" />
      <TopStatistics :topData="topData" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { get1stAndToday, past30Day, past7Day, pastMonth, pastWeek } from '@/utils/formValidate'
import StatisticsHeader from './components/StatisticsHeader.vue'
import TurnoverStatistics from './components/TurnoverStatistics.vue'
import UserStatistics from './components/UserStatistics.vue'
import OrdersStatistics from './components/OrdersStatistics.vue'
import TopStatistics from './components/TopStatistics.vue'
import { ref, onMounted } from 'vue'
import { OrdersData, Top10Data, TurnoverData, UserData } from '@/types/statistics'
import {
  getAdminOrdersStatisticsAPI,
  getAdminTopStatisticsAPI,
  getAdminTurnoverStatisticsAPI,
  getAdminUserStatisticsAPI,
} from '@/api/admin/statistics'
import { useUserStore } from '@/stores/userStore'
import { getOrdersStatisticsAPI, getTopStatisticsAPI, getTurnoverStatisticsAPI } from '@/api/business/statistics'
const userStore = useUserStore()
const businessId = userStore.user.id
// 默认日期下标
let flag = ref(2)
// 所选时间范围
const timeRange = ref<string[]>([])
// 营业额统计
const turnoverData = ref({} as TurnoverData)
const userData = ref({} as UserData)
const ordersData = ref({} as OrdersData)
const topData = ref({} as Top10Data)
onMounted(() => {
  getDate(flag.value)
})
const init = (begin: string, end: string) => {
  getTurnover(begin, end)
  getUser(begin, end)
  getOrders(begin, end)
  getTop10(begin, end)
}
// 营业额
const getTurnover = async (begin: string, end: string) => {
  try {
    if (userStore.rule === 'admin') {
      let { data } = await getAdminTurnoverStatisticsAPI({ begin, end })
      turnoverData.value = {
        dateList: data.dateList,
        turnoverList: data.turnoverList,
      }
    } else {
      let { data } = await getTurnoverStatisticsAPI({ begin, end, businessId })
      turnoverData.value = {
        dateList: data.dateList,
        turnoverList: data.turnoverList,
      }
    }
  } catch (error) {
    console.log(error)
    turnoverData.value = {} as TurnoverData
  }
}
// 用户统计
const getUser = async (begin: string, end: string) => {
  if (userStore.rule === 'admin') {
    try {
      let res = await getAdminUserStatisticsAPI({ begin, end })
      userData.value = {
        dateList: res.data.dateList,
        newUserList: res.data.newUserList,
        totalUserList: res.data.totalUserList,
      }
    } catch (error) {
      console.log(error)
      userData.value = {} as UserData
    }
  }
}
// 订单统计
const getOrders = async (begin: string, end: string) => {
  try {
    if (userStore.rule === 'admin') {
      let { data } = await getAdminOrdersStatisticsAPI({ begin, end })
      ordersData.value = {
        ...data,
      }
    } else {
      let { data } = await getOrdersStatisticsAPI({ begin, end, businessId })
      ordersData.value = {
        ...data,
      }
    }
  } catch (error) {
    console.log(error)
    ordersData.value = {} as OrdersData
  }
}
// 销量前10
const getTop10 = async (begin: string, end: string) => {
  try {
    if (userStore.rule === 'admin') {
      let { data } = await getAdminTopStatisticsAPI({ begin, end })
      topData.value = {
        ...data,
      }
    } else {
      let { data } = await getTopStatisticsAPI({ begin, end, businessId })
      topData.value = {
        ...data,
      }
    }
  } catch (error) {
    console.log(error)
    topData.value = {} as Top10Data
  }
}
// 获取当前选中的tab时间
const getDate = (flag: number) => {
  switch (flag) {
    case 1:
      timeRange.value = get1stAndToday()
      break
    case 2:
      timeRange.value = past7Day()
      break
    case 3:
      timeRange.value = past30Day()
      break
    case 4:
      timeRange.value = pastWeek()
      break
    case 5:
      timeRange.value = pastMonth()
      break
  }
  let begin = timeRange.value[0] as string
  let end = timeRange.value[1] as string
  init(begin, end)
}
</script>
<style scoped lang="scss">
.statistics-container {
  .echart {
    display: flex;
    flex-wrap: wrap;

    div {
      background: #fff;
      margin-bottom: 20px;
      border-radius: 5px;
    }
  }
}
</style>
